<template>
  <div>
    <van-nav-bar
      title="客服"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="mt-20">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="ke ml-10 flex jc-r"
      >
        <div>
          <p class="f14 pad-10">&nbsp;</p>
          <p class="bg-fff pad-10">{{ item }}</p>
        </div>
        <img src="http://fresh.huruqing.cn/img/kefu.b763f527.png" alt="1" />
      </div>
    </div>
    <div class="w100 bg-fff footed flex aic fixed jc-sa">
      <div class="flex">
        <van-icon name="plus" />
      </div>
      <input v-model="sms" ref="aaa" type="text" placeholder="请输入你的意见" />
      <div>
        <van-button @click="subinfo" size="small" type="primary" ref="aa"
          >发送</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sms: "",
      list: [],
    };
  },
  methods: {
    onClickLeft() {},
    subinfo() {
      this.list.push(this.$refs["aaa"].value);
      this.sms = "";
    },
  },
};
</script>

<style lang="scss">
.van-nav-bar__text {
  color: #c3030c;
}
footer {
  background-color: #f4f4f4;
  align-items: center;
  height: 30px;
  position: fixed;
  bottom: 1px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
input {
  outline: none;
  border: none;
  width: 60%;
}
.ke {
  img {
    width: 40px;
    height: 40px;
  }
}
.footed {
  height: 50px;
  bottom: 0;
}
input {
  outline: medium;
  border: none;
}
.pad-10 {
  padding: 10px;
}
.mar-5 {
  margin: 5px;
}
.fixed {
  position: fixed;
}
.bg-fff {
  background-color: #fff;
}
.flex {
  display: flex;
}

/* 项目在盒子内居中 */
.jc-c {
  justify-content: center;
}

/* 行与行之间留有空格 */
.jc-sb {
  justify-content: space-between;
}
.jc-r {
  justify-content: right;
}
.jc-sa {
  justify-content: space-around;
}
/* 元素纵向居中排列 */
.aic {
  align-items: center;
}
.w100 {
  width: 100%;
}
</style>